 .x-mask{position: fixed;top: 0;left: 0;right: 0;bottom: 0;width: 100%;height: 100%;background-color: rgba(55,55,55,.6);z-index: 1000;}
.x-drawer{width: 260px;height: 100%;position: fixed;top: 0;right: 0;background: #fff;box-shadow: 0 4px 12px rgba(0,0,0,.15);z-index: 1200}
.x-drawer.x-drawer-left{left: 0}
.x-drawer .x-drawer-header{padding: 14px 16px;line-height: 1;border-bottom: 1px solid #e8eaec;position: relative;}
.x-drawer .x-drawer-header span{display: inline-block;line-height: 20px;width: 100%;font-size: 14px;height: 20px;color: #17233d;font-weight: 700;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;text-align: left}
.x-drawer .x-drawer-header i{position: absolute;top: 50%;right: 5%;transform: translate(0,-50%);}
.x-drawer .x-drawer-header .x-iconclose:hover{cursor: pointer;}
.x-drawer  .x-drawer-body{width: 100%;height: calc(100%-50px);padding: 15px;font-size: 12px;line-height: 1.5;word-wrap:break-word;overflow: auto;text-align: left}

.x-drawer-slide-enter,.x-drawer-slide-leave-active{transform: translate(100%,0);transition: all .3s ease}
.x-drawer-slide-leave,.x-drawer-slide-enter-active{transition: all .3s }

.x-drawer-slide-left-enter,.x-drawer-slide-left-leave-active{transform: translate(-100%,0);transition: all .3s ease}
.x-drawer-slide-left-leave,.x-drawer-slide-left-enter-active{transition: all .3s }
